<template>
    <div class="cart">
        <div class="title">
            <ul>
                <li>
                    <van-icon name="certificate" />
                    <span>100%正品保证</span>
                </li>
                <li>
                    <van-icon name="certificate" />
                    <span>所有商品精挑细选</span>
                </li>
                <li>
                    <van-icon name="certificate" />
                    <span>售后无忧</span>
                </li>
            </ul>
        </div>
        <div class="total">购买数量<span>{{ this.unique(this.result).length}}</span></div>
        <div class="content">
            <div class="con_has" v-if="getShopList && getShopList.length > 0">
                <ul>
                    <!-- 复选框组 组件 -->
                    <van-checkbox-group v-model="result" ref="checkboxGroup">
                        <li v-for="(item,index) in getShopList" :key="item.id">
                            <van-swipe-cell>
                                <div class="card">
                                    <!-- 复选框 -->
                                    <van-checkbox 
                                        :name="item" 
                                        checked-color="#ee0a24"
                                        icon-size="18px"
                                        @click="changeCheckBox"
                                        ref="checkItem"
                                    />
                                    <van-image 
                                        :src="item.img" 
                                        lazy-load
                                    />
                                    <div class="mes">
                                        <p>{{item.name}}</p>
                                        <p>{{item.skuStr}}</p>
                                        <div class="bottom">
                                            <div class="l">￥{{item.price}}</div>
                                            <div class="r">
                                                <span @click="reduceNum(index)">-</span>
                                                <input type="number" 
                                                    v-model="iptVal[index]"
                                                    @change="changeNum(item,index)"
                                                >
                                                <span @click="addNum(index)">+</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <template #right>
                                    <van-button square text="删除" type="danger" class="delete-button" @click="deleteShop(index)"/>
                                </template>
                            </van-swipe-cell>
                        </li>
                    </van-checkbox-group>
                </ul>
                <div class="foot">
                    <div class="l">
                        <van-checkbox v-model="checkAll" @click="toggleAll" checked-color="#ee0a24">全选 ({{checedkNum}})</van-checkbox>
                    </div>
                    <div class="r">
                        ￥{{checkedPrice}}
                        <van-button type="danger" @click="goOrder" round>立即下单</van-button>
                    </div>
                </div>
            </div>
            <div class="con_null" v-else>
                <div class="img">
                    <img :src="imgUrl" alt="" v-lazy="imgUrl">
                </div>
                <div class="con_title">
                    <van-divider
                        :style="{ 
                            color: '#566a78', 
                            borderColor: '#bebebe', 
                            padding: '0 80px',
                            fontSize:'13px'
                        }"
                        >
                        为你推荐
                    </van-divider>
                </div>
                <div class="con">
                    <ul>
                        <li v-for="item in list" :key="item.id">
                            <picture-item :item="item"></picture-item>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PictureItem from '@/components/PictureItem';
import { mapMutations, mapGetters } from "vuex";
export default {
    components:{PictureItem},
    data(){
        return{
            imgUrl:'http://47.115.51.185/h5/img/noCart.6f2abfef.png',
            list:[],
            result:[],
            checkAll:true,
            iptVal:[],
            checedkNum:0,
            checkedPrice:0,
            shopMes:null,
        }
    },
    computed:{
        ...mapGetters(['getShopList','getOrderList']),
    },
    created(){
        this.showDiv();
        this.checedkNum = this.unique(this.result).length;
    },
    watch:{
        'getShopList':{
            handler(newVal){
                this.iptVal = [];
                this.result = [];
                this.eachArr(newVal);
                this.showDiv();
                this.checedkNum = this.unique(this.result).length;
                this.sumPrice();
            },

        },
        // deep:true,
        // immediate:true,
    },
    methods:{
        ...mapMutations(['changeBuyShop','clearBuyShop','changeOrderShop','clearOrderShop']),
        showDiv(){
            // 购物车不为空时
            if(this.getShopList && this.getShopList.length > 0){
                this.eachArr(this.getShopList);
                this.sumPrice();
            }else{
                // 购物车为空时
                this.$axios.get('api/product/detail/61').then(d=>{
                    this.list = d.data.data.good_list;
                }) 
            }
            // console.log(1);
        },
        eachArr(arr){
            arr.map(item => {
                this.iptVal.push(item.num);
                this.result.push(item);
            })
        },
        addNum(index){
            let shopList = this.getShopList;
            let shop = shopList[index];
            // shop.num = ++shop.num < shop.max_num?shop.num:
            if(++shop.num < shop.max_num){
                shop.num;
            }else{
                shop.num = shop.max_num;
                this.$toast('库存只有这么多');
            }
            this.shopMes = shop;
            shopList.splice(index,shop);
            // console.log(shop);
            this.changeBuyShop(shopList);
            // console.log(this.shopMes);
            this.checkAll = true;
            // this.sumPrice();
        },
        reduceNum(index){
            let shopList = this.getShopList;
            let shop = shopList[index];
            // shop.num = --shop.num < 1?1:shop.num;
            if(--shop.num < 1){
                shop.num = 1;
                this.$toast('最小数量为1件');
            }else{
                shop.num;
            }
            shopList.splice(index,shop);
            // console.log(shop);
            this.changeBuyShop(shopList);
            this.checkAll = true;
            // this.sumPrice();
        },
        // 全选
        toggleAll(){
           if(!this.checkAll){
                this.$refs.checkboxGroup.toggleAll(false);
                this.checkAll = false;
           }else{
                this.$refs.checkboxGroup.toggleAll(true);
                this.checkAll = true;
           }
            this.checedkNum = this.unique(this.result).length;
            this.sumPrice();
        },
        // 单选控制全选
        changeCheckBox(){
            let arr = this.unique(this.result);
            // console.log(arr);
            if(this.getShopList.length == arr.length){
                this.checkAll = true;
            }else{
                this.checkAll = false;
            }
            this.checedkNum = this.unique(this.result).length;
            this.sumPrice();
        },
        // 去重
        unique(arr){
            let newArr = arr.filter((item,index,self)=>{
                return self.findIndex(el=>el.id==item.id) === index;
            })
            return (newArr);
        },
        // 总价
        sumPrice(){
            let arr = this.unique(this.result);
            let sum = 0;
            arr.map(item => {
                sum += parseInt(item.price) * item.num;
            })
            this.checkedPrice = sum;
        },
        // 删除
        deleteShop(index){
            // console.log(index);
            let shopList = this.getShopList;
            shopList.splice(index,1);
            // console.log(shopList);
            this.changeBuyShop(shopList);
        },
        // 输入框改变
        changeNum(item,index){
            let shopList = this.getShopList;
            let shop = item;
            if(this.iptVal[index] > item.max_num){
                shop.num = shop.max_num;
                this.$toast(`库存的数量为${shop.max_num}`);
            }else if(this.iptVal[index] < 1){
                shop.num = 1;
                this.$toast('至少选择一件商品');
            }else{
                shop.num = this.iptVal[index];
            }
            // console.log(shop);
            shopList.splice(index,shop);
            this.changeBuyShop(shopList);
        },
        goOrder(){
            let newOrderList =this.result;
            this.changeOrderShop(newOrderList);
            // console.log(newOrderList);
            this.$router.push('/order');
        },
    },
}
</script>

<style lang="less">
.text-hidden{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart{
    font-size: 14px;
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 50px;
    position: relative;
    .title{
        margin: 0;
        padding: 0;
        ul{
            background-color: #f5f5f5;
            padding: 6px;
            display: flex;
            li{
                font-size: 12px;
                flex: 1;
                text-align: center;
                // border: solid 1px red;
                color: #92918ce8;
            }
        }
    }
    .total{
        padding: 6px;
        background-color: white;
        // border: solid 1px red;
        span{
            display: inline-block;
            margin-left: 4px;
            color: #fd7e53;
        }
    }
    .content{
        background-color: white;
        margin-top: 10px;
        .con_null{
            padding-top: 20px;
            .img{
                width: 207px;
                height: 168px;
                // border: solid 1px red;
                margin: 0 auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .con{
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    li{
                        width: 45%;
                        margin: 6px;
                        .picture_item{
                            // border: solid 1px red;
                            width: 100%;
                            .img{
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        .con_has{
            position: relative;
            ul{
                .van-checkbox-group{
                    background-color: #f5f5f5;
                    li{
                        margin: 6px 0;
                        background-color: #fff;
                        .card{
                            // border: solid 1px red;
                            display: flex;
                            padding: 10px;
                            .van-checkbox{
                                padding-right: 8px;
                            }
                            .van-image{
                                width: 140px;
                                height: 80px;
                                margin: 0 10px;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 10px;
                                }
                            }
                            .mes{
                                display: flex;
                                flex-direction: column;
                                justify-content: space-evenly;
                                p{
                                    margin: 0;
                                    .text-hidden;
                                    font-size: 13px;
                                    &:nth-child(2){
                                        font-size: 10px;
                                        color: #978a90;
                                    }
                                }
                                .bottom{
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    .r{
                                        display: flex;
                                        align-items: center;
                                        input{
                                            width: 20px;
                                            height: 14px;
                                            text-align: center;
                                        }
                                        span{
                                            border: solid 1px #ccc;
                                            display: inline-block;
                                            width: 24px;
                                            text-align: center;
                                            padding: 0.5px;
                                        }
                                    }
                                }
                            }
                        }
                        .van-swipe-cell__right{
                            height: 100px;
                            // border: solid 1px orange;
                            .delete-button{
                                height: 100%;
                            }
                        }
                    }
                }
            }
            .foot{
                border-bottom: solid 1px rgba(223, 223, 223, 0.363);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding:4px 10px;
                margin-top: 10px;
                position: fixed;
                background-color: white;
                width: 94.5vw;
                bottom: 50px;
                .l{
                    i{
                        margin-right: 6px;
                    }
                }
                .r{
                    display: flex;
                    align-items: center;
                    color: #fc4141;
                    font-size: 16px;
                    button{
                       height: 34px; 
                       width: 96px;
                       margin-left: 10px;
                    }
                }
            }
        }
    }
}
</style>